<template>
  <el-card>
    <div slot="header" class="clearfix">
      <span>当前对账审核</span>
    </div>
    <div class="home-container">

      <v-searchForm
        :form-data="filter_info"
        :form-title="formTitle"
        @search="search"
        @reset="reset"
      />

      <v-tableBtns
        :show-create="admin&&financeRole"
        :table-title="exportTitle"
        :table-data="exportData"
        :show-group-manage="admin"
        @addNew="addNew"
        @groupManage="groupManage"
      />

      <v-table
        :table-title="tableTitle"
        :table-data="tableData"
        @sortChange="sortChange"
        :readable="true"
        @del="del"
        @read="read"
        @edit="edit"
      />
      <v-pagination
        :page-info="pageInfo"
        :get-table-list="getTableList"
      />

    </div>

    <el-dialog
      :visible.sync="dialogTableVisible"
      width="30%"
    >
      <v-transfer
        :data="groupList"
        :right-data="rightList"
        title="分组管理"
        @change="groupChange"
      />
    </el-dialog>
  </el-card>
</template>

<script>
import { mapGetters } from 'vuex'
import UploadExcelComponent from '@/components/UploadExcel/index.vue'
import auth from '@/mixins/auth'

export default {
  name: 'Home',
  mixins: [auth],
  components: { UploadExcelComponent },
  data() {
    return {
      // f分页
      pageInfo: {
        pageNumber: 1,
        pageSize: 30,
        totalPage: 0,
        totalRow: 0
      },
      // 排序
      sidx: 'id',
      sortKey: null,
      formTitle: [
        {
          cn: 'id：',
          en: 'id'
        },
        {
          cn: '汇款信息：',
          en: 'adv_bank_info',
          placeholder:'账号/银行'
        },
        {
          cn: '汇款金额：',
          en: 'money',
          type: 'range',
          dataName: { min: 'moneyMin', max: 'moneyMax' }
        },
        {
          cn: '状态：',
          en: 'curState',
          type: 'select',
          list: [
            {
              label: '等待认领',
              value: 0
            },
            {
              label: '商务填写',
              value: 1
            },
            {
              label: '财务审核中',
              value: 2
            },
            {
              label: '财务退回',
              value: 3
            },
            {
              label: '无人认领',
              value: 5
            }
          ]
        },
        {
          cn: '最近资金往来：',
          en: 'created_at',
          type: 'time'
        }
      ],
      filter_info: {},
      tableTitle: [
        {
          cn: 'id',
          en: 'id',
          sortable:true
        },
        // {
        //   cn: '创建时间',
        //   en: 'created_at',
        //   sortable:true
        // },
        {
          cn: '汇款账号',
          en: 'bank_account'
        },
        {
          cn: '汇款银行',
          en: 'bank_name'
        },
        {
          cn: '金额',
          en: 'money',
          sortable:true
        },
        {
          cn: '认领人',
          en: 'name',
        },
        {
          cn: '状态',
          en: 'cur_status',
          sortable:true
        }
      ],
      tableData: [],

      exportTitle:[],
      exportData:[],

      groupList: [],
      rightList: [],
      dialogTableVisible: false
    }
  },

  activated() {
    this.getTableList()
  },
  methods: {
    getTableList() {
      const loading = this.$loading()

      const datas = {
        curState: 6,
        page: this.pageInfo.pageNumber, rows: this.pageInfo.pageSize,
        ...this.filter_infos,
        sidx: this.sidx,
        sortKey: this.sortKey,
      }
      this.$get('action/CheckingRequisition/dataGrid', datas)
        .then(res => {
          let list
          const data = res.data
          if (data.list && data.list.length) {
            list = data.list.map((item, index) => {
              const obj = item
              switch ( item.cur_status) {
                case 0:
                  obj.cur_status = '等待认领'
                  obj.cur_status1 = 0
                  break
                case 1:
                  obj.cur_status = '商务填写'
                  obj.cur_status1 = 1
                  break
                case 2:
                  obj.cur_status = '财务审核中'
                  obj.cur_status1 = 2
                  break
                case 3:
                  obj.cur_status = '财务退回'
                  obj.cur_status1 = 3
                  break
                case 4:
                  obj.cur_status = '已完成'
                  obj.cur_status1 = 4
                  break
                case 5:
                  obj.cur_status = '无人认领'
                  obj.cur_status1 = 5
                  break
              }
              // console.log(obj,'ogj');
              obj.bank_name = obj.adv_bank_info && JSON.parse(obj.adv_bank_info).bank_name
              obj.bank_account = obj.adv_bank_info && JSON.parse(obj.adv_bank_info).bank_account
              return obj
            })
            this.pageInfo.totalPage = res.data.totalPage
            this.pageInfo.totalRow = res.data.totalRow
          }

          this.tableData = list || []
            loading.close()
        })
        .catch(err => {
          loading.close()
          this.$message({
            message: '获取数据失败',
            type: 'error'
          })
          return false
        })
    },
    // 搜索
    search() {
      this.pageInfo.pageNumber=1
      this.getTableList()
    },

    reset() {
      this.filter_info = {}
      this.pageInfo.pageNumber=1
      this.getTableList()
    },

    del(val) {
      const data = { id: val.row.id }
      this.$post('action/CheckingRequisition/del', data)
        .then(res => {
          // this.tableData.splice(val.$index,1)
          this.getTableList()
          this.$message({
            message: res.msg,
            type: 'success'
          })
        })
    },
    read(val) {
      this.$router.push({
        name: 'reconcile_manage.preview',
        query: {
          id: val.row.id
        }
      })
    },
    editable(val) {
      if (this.admin) {
        return true
      }
      if (this.assistantRole) {
        return false
      }
      if (this.businessRole && (val.row.cur_status1 < 2 ||val.row.cur_status1===3) ) {
        return true
      }
      if (this.financeRole&&val.row.cur_status1 !== 4 ) {
        return true
      }
      return false
    },
    edit(val) {
      if (!this.editable(val)){
        return this.$message({
          message:'你没有权限修改该订单',
          type:'error'
        })
      }
      this.$router.push({
        name: 'reconcile_manage.application',
        query: {
          id: val.row.id
        },
        params: {
          isEdit: 1
          // details:val.row
        }
      })
    },
    addNew() {
      this.$router.push({
        name: 'reconcile_manage.application'
      })
    },

    // 分组管理对话框

    groupManage() {
      this.dialogTableVisible = true
    },
    cancel() {
      this.$emit('cancel')
      this.dialogTableVisible = false
    },
    filterMethod(query, item) {
      return item.label.indexOf(query) > -1
    },
    confirm() {
      if (this.rightData.length > 0) {
        this.$emit('confirm', this.rightData)
        this.dialogTableVisible = false
      } else {
        console.log('confirm')
        this.$alert('请勾选右侧至少一项', '', {
          confirmButtonText: '确定'
        })
      }
    },
    groupChange(val) {
      console.log(val)
    },
    // 排序
    sortChange({ column, prop, order }) {
      console.log(column, prop, order)
      this.sidx = prop || 'id'
      this.sortKey = order === 'ascending' ? 'asc' : null
      this.pageInfo.pageNumber=1
      this.getTableList()
    }

  },
  computed: {
    ...mapGetters([
      'name',
      'roles'
    ]),
    filter_infos() {
      const data = {}
      const origin = this.filter_info
      for (const key in origin) {
        if (!this.filter_info[key] && this.filter_info[key] !== 0) {
          this.$delete(this.filter_info, key)
          continue
        }
        if (key === 'created_at') {
          data.start_time = origin[key][0]
          data.End_time = origin[key][1]
        } else {
          data[key] = origin[key]
        }
      }
      if (!origin.created_at) {
        delete data.start_time
        delete data.End_time
      }
      return data
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
  .table-menu {
    padding-bottom: 15px;
  }

</style>
